<!-- 导入地图 -->
<template>
  <!-- 展示地图 -->
  <view class="map">
    <!-- <busmap :lineCode="lineCode" ></busmap> -->
    <baidu-map
      style="width: 750rpx; height:700rpx;" :center="centerPoints" :zoom="15" :scroll-wheel-zoom="true" coord-type="gcj02"
      @ready="loadedMap" @click="mapDot">
      <!-- <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/> -->
      <!-- <bm-marker :position="startposition"  animation="BMAP_ANIMATION_BOUNCE"> -->

      <!-- <bm-point-collection
        :points="polylinePaths" shape=" BMAP_POINT_SHAPE_WATERDROP" color="blue"
        size="BMAP_POINT_SIZE_BIG"/> -->
      <!-- </bm-marker> -->
      <!-- <bm-point-collection :points="dots" color="red" size="BMAP_POINT_SIZE_SMALL" :icon="{url, size: {width: 50, height: 50}}"/> -->
      <bm-marker v-if="flag" :position="{lng:dot.lng, lat:dot.lat}" :dragging="false" :icon="url?{url, size: {width: 30, height: 30}}:''">
        <!-- <bm-label content="我爱北京天安门" :label-style="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
      </bm-marker>
    </baidu-map>
    <view class="del" @click="delDot"><u-icon name="trash" color="#ccc"/></view>
  </view>

</template>

<script>

export default {
  props: {
    modelValue: {
      type: Array,
      default: undefined
    },
    centerPoints: {
      type: Object,
      default: () => ({ lng: 116.514, lat: 39.925 })
    },
    url: {
      type: String,
      default: ''
    },
    points: {
      type: Object,
      default: () => ({ lng: 116.404, lat: 39.915 })
    }
  },
  data() {
    return {
      flag: true,
      dot: {},
      // lng: this.lng,
      // lat: this.lat,
      // polylinePaths: [{
      //   lng: 116.404,
      //   lat: 39.915
      // },
      // {
      //   lng: 116.405,
      //   lat: 39.920
      // },
      // {
      //   lng: 116.423493,
      //   lat: 39.907445
      // }
      // ],
      // 地图数据
      lineCode: '',
      items: ['地图'],
      buttonIndex: 0,
      scale: 16 // 地图缩放比例
    }
  },
  watch: {
    centerPoints(val) {
      console.log(val, 'center')
    }
  },

  created() {
    this.dot = this.points
  },
  methods: {
    delDot() {
      this.flag = false
      this.$emit('update:modelValue', [])
    },
    mapDot(e) {
      this.flag = true
      this.dot.lat = e.point.lat
      this.dot.lng = e.point.lng
      // console.log('center', this.centerPoints)
      // const position = { lng: e.point.lng, lat: e.point.lat }
      this.$emit('update:modelValue', [e.point.lng, e.point.lat])
      // this.dots.push(position)
      // console.log(this.dot)
    }
  }
}

</script>

<style lang="scss" scoped>
.map{
  position: relative;
}
.del{
top: 50rpx;
right: 20rpx;
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;
  background-color: #1762f2;
  box-sizing: border-box;
  font-size: 30rpx;
  z-index: 999;
}
</style>